<script setup lang="ts">
import { ref, computed, h } from 'vue'
 import {  NAvatar } from 'naive-ui'
// import { NFormItem, NInput, NButton, NSelect, NRadioGroup, NRadio, NAvatar, NTag, NRadioButton, NSpace } from 'naive-ui'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { Microphone } from '@vicons/fa';
import { FORM_ADD, } from '../../service/apis/from';
import { showMsg } from '@/assets/utils/tools'

const router = useRouter()

const transcript = ref('');//语音转文字
const audioRef = ref<any>(null)

const taglist = ref<any[]>([
    {
        id: 1,
        name: '财务数据',
        check: false
    },
    {
        id: 2,
        name: '财务数据1',
        check: false
    }, {
        id: 3,
        name: '财务数据2',
        check: false
    },
    {
        id: 4,
        name: '人资数据',
        check: false
    },
    {
        id: 5,
        name: '人资数据1',
        check: false
    },
    {
        id: 7,
        name: '人资数据1',
        check: false
    }
])
const selectedValue = ref(null)
const checkboxList = ref(null)
const checkboxGroup = ref([
    {
        value: '数据',
        label: '数据表格'
    },
    {
        value: '图表',
        label: '图表展示'
    },
    {
        value: '三维',
        label: '三维展示'
    },

])

const loading = ref(false)
const formValue = ref({
    "呈现":'',
    "类型":'列表',
    "名称":'',
    "图标":'',
    "数据项":''

})
const options = ref([
    {
        label: '设置',
        value: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
    },
    {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    },
    {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    }, {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    }, {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    }
])
const renderLabel = (option: any) => h(
    'div',
    {
        class: 'flex items-center ',
    },
    {
        default: () => [
            h(NAvatar, {
                src: option.value,
                round: true,
                size: 24,
                style: {
                    marginRight: '12px'
                }
            }),
        ],
    }
)


const renderSingleSelectTag = ({ option  }:{ option:any  }) => {
    console.log(option);

    return h(
        'div',
        {
            style: {
                display: 'flex',
                alignItems: 'center',
                skk: "kdkkd"

            }
        },
        [
            h(NAvatar, {
                src: option.value,
                round: true,
                size: 24,
                style: {
                    marginRight: '12px'
                }
            }),

        ]
    )
}

function baocun() {
    

    let arr:any = []
    let arr1:any =checkboxList.value
    let arr2:any = [...arr1]
    taglist.value.forEach((e:any)=>{
        if (e.check == true) {
          arr.push(e.name)  
        }
    })
    let str =  arr.join(",");
    let str1 =  arr2.join(",");
    
    formValue.value.数据项 = str
    formValue.value.呈现 = str1
    console.log(formValue.value);

    if(check()){
        FORM_ADD({"params":JSON.stringify(formValue.value)}).then((res:any)=>{
            console.log('qignqiu',res);
            if(res.stacode == 200){
                reSetForm()
                loading.value = false
                showMsg('success','success')
            }
        }).catch((err:any)=>{
            // showMsg('error','')
            console.log('err',err);
        })
 }
}
function check () {
    if(formValue.value.名称 == '' || formValue.value.呈现 == ''  ||  formValue.value.图标 == '' || formValue.value.数据项 == ''){
        return false
    }else{
        return true
    }
}

function reSetForm() {
    formValue.value.名称 = '';
    formValue.value.呈现 = ''
    formValue.value.图标 = ''
}
// function luyin() {
//     navigator.mediaDevices
//         .getUserMedia({ audio: true })
//         .then(mediaStream => {
//             // let  audio = document.querySelector("audioRef");
//             audioRef.value.srcObject = mediaStream;
//             audioRef.value.play()
//         })
//         .catch(err => {
//             console.log(err.name + ": " + err.message);
//         });

// }








function luyin() {
    transcript.value = '';
    navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then(mediaStream => {
            // let  audio = document.querySelector("audioRef");
            audioRef.value.srcObject = mediaStream;
            audioRef.value.play()


            let recognition: any;

            // 检查浏览器是否支持 Web Speech API
            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
                console.log('jdsfhjasdhjka');

                recognition = new (window as any).webkitSpeechRecognition || new (window as any).SpeechRecognition();
                
                recognition.lang = 'zh-CN';  // 设置识别语言
                recognition.continuous = true;  // 是否连续识别
                recognition.interimResults = true;  // 是否返回中间结果
                recognition.start()
                recognition.onsoundstart = true
                recognition.onspeechstart = true

                // console.log(recognition);

                // 识别结果事件
                recognition.onresult = (event: any) => {
                    console.log(transcript.value );

                    transcript.value = '';  // 清空之前的文本
                    for (let i = 0; i < event.results.length; ++i) {
                        transcript.value += event.results[i][0].transcript;  // 拼接识别结果
                    }
                    if(transcript){
                        audioRef.value.pause()
                    }
                   
                };

                // 识别错误事件
                recognition.onerror = (event: any) => {
                    // audioRef.value.pause()
                    // recognition.stop()
                    // audioRef.value.play()
                    console.error('识别出错:', event.error);
                    recognition.stop()
                    audioRef.value.pause()
                };

                // 识别结束事件
                recognition.onend = () => {
                    audioRef.value.pause()
                    recognition.stop()
                    console.log('识别结束');
                };
            } else {
                console.error('当前浏览器不支持语音识别');
            }

        })
        .catch(err => {
            console.log(err.name + ": " + err.message);
        });
}


</script>
<template>

    <baseCard title="构建数据报表应用模块向导">

        <div style="min-width: 500px;width: 50%;margin: 0px auto;">
            <n-input v-model:value="transcript" type="text" placeholder="搜索数据">
                <template #suffix>
                    <n-icon :component="Microphone" style="cursor: pointer;" @click="luyin" />
                </template>

            </n-input>

            <n-space
                style="border: 1px solid #36ad6a;height: 300px;margin: 10px 0;overflow-y: scroll; overflow-x: hidden;">

                <n-tag v-model:checked="i.check" checkable v-for=" (i, n) in taglist" :key="n">
                    {{ i.name }}
                </n-tag>

            </n-space>
            <n-checkbox-group v-model:value="checkboxList" style="margin: 10px;">
                <n-space>
                    <n-checkbox :label="cb.label" v-for="cb in checkboxGroup" :key="cb.value" :value="cb.value" />
                </n-space>
            </n-checkbox-group>
            <n-form-item label="模块名称" label-placement="left" path="user.name">
                <n-input v-model:value="formValue.名称" type="text" placeholder="请输入模块名称"></n-input>
            </n-form-item>
            <n-form-item label="模块图标" label-placement="left" path="user.name">
                <n-select v-model:value="formValue.图标" :render-label="renderLabel" :render-tag="renderSingleSelectTag"
                    filterable placeholder="请选择图标" :options="options" style="margin-right: 10px;" clearable />
                <n-button value="large">上传图标</n-button>
            </n-form-item>
            <n-space justify="center"><n-button type="primary" value="large" :loading="loading" @click="baocun">保存</n-button></n-space>



            <!-- <vue-speech @onTranscriptionEnd="onEnd"/> -->
        </div>
        <audio controls ref="audioRef"  style="display: none;" muted> </audio>
    </baseCard>

</template>

<style src="./index.scss" scoped></style>
